<template>
  <view class="list">
    <view class="item" v-for="item of items" :key="item.id">
      <view class="img"><image :src="item.cover_pic" mode="aspectFill"></image></view>

      <view class="txt">
        <view class="tit">
          {{item.name}}
        </view>

        <view class="fd">
          <view class="fdLet">
            <view class="price">
              <view class="em before">¥</view>
              <view class="con">{{ getPrect(item.price)[0] }}</view>
              <view class="em after">.{{ getPrect(item.price)[1] }}</view>
            </view>

            <view class="num">{{item.comment_num}}条评论</view>
          </view>
          <view class="fdrig" @click="handle('detail',item.id)">查看</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  computed: {
    getPrect() {
      return (price) => {
        let newPrice = String(price).split(".");

        return newPrice;
      };
    },
  },

  data() {
    return {};
  },

  methods: {
    handle(type, id) {
      switch (type) {
        case "detail":
          uni.navigateTo({
            url: `/admin/evaluate/item/index?id=${id}`,
          });
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  display: flex;
  margin-bottom: 24rpx;
  padding: 36rpx 24rpx;
  background: #fff;

  .img {
    margin-right: 20rpx;
    width: 170rpx;
    height: 170rpx;

    image {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
      background: #f2f2f2;
    }
  }

  .txt {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170rpx;
  }

  .tit {
    display: -webkit-box;
    white-space: normal;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    overflow: hidden;
    font-size: 30rpx;
    color: #262626;
  }

  .fd {
    display: flex;
    align-items: flex-end;

    .num {
      padding-top: 5rpx;
      font-size: 24rpx;
      color: #8c8c8c;
    }

    .fdLet {
      flex: 1;
    }

    .fdrig {
      width: 152rpx;
      height: 60rpx;
      line-height: 56rpx;
      text-align: center;
      border: 2rpx solid #f60313;
      border-radius: 32px;
      color: #f60313;
    }
  }
}

.price {
  display: flex;
  align-items: flex-end;
  color: #262626;
  font-size: 40rpx;
  line-height: 1;

  .con {
    position: relative;
    top: 4rpx;
  }

  .em {
    font-size: 24rpx;
  }
}
</style>
